<template>
  <div>
    <div v-for="obj in compPiclist" :key="obj" class="image-show-comp-item" @click="handleView(obj)">
      <img :src="obj"/>
    </div>
    <Modal title="图片大图浏览" v-model="visible">
      <img :src="imageUrl" v-if="visible" style="width: 100%">
    </Modal>
  </div>
</template>
<script>

import { imageRemoteUrl } from "@/utils/imageConstant";

export default {
  name: "order-image-show-comp",
  props:{
    // piclist: {
    //   type: Array,
    //   default: false
    // }
    piclist: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      compPiclist:[],
      visible: false,
      imageUrl: ""
    };
  },
  methods: {
    initByType(initImageStr){
      this.compPiclist = this.addPicPrefix(initImageStr);
    },
    init(picStr){
      this.compPiclist = this.addPicPrefix(picStr);
    },
    addPicPrefix(addPrefixStr){
      const urlPrefix = this.imageBaseUrl;
      if(addPrefixStr){
        ("," === addPrefixStr.slice(-1)) ? addPrefixStr = addPrefixStr.substring(0,addPrefixStr.length-1) : addPrefixStr = addPrefixStr;
        let pathArr = addPrefixStr.split(',');
        let addPrefixPathArr = [];
        for (let i in pathArr) {
          addPrefixPathArr.push(urlPrefix+pathArr[i]);
        }
        return addPrefixPathArr;
      }
    },
    handleView (item) {
      this.imageUrl = item;
      this.visible = true;
    },
  },

  mounted() {
    this.imageBaseUrl = imageRemoteUrl.imageBaseUrl;
    console.log("================mounted===============");
    this.init(this.piclist);
  },
  beforeUpdate(){
    // this.init(this.piclist);
  }
};
</script>
<style>
.image-show-comp-item {
  float:left;
  margin-right:10px;
  cursor: pointer;
}
.image-show-comp-item img {
  width:60px;
  height:60px;
  border:1px solid transparent;
  border-radius: 4px;
}
</style>
